<template>
  <div id="app" :style="appstyle">
    <transition name="pageslide" mode="in-out">
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'app',
  data(){
    return {
      appstyle: {}
    }
  },
  mounted(){
    this.resize()
    window.addEventListener('resize', this.resize)
  },
  methods: {
    resize(){
      let xscale = (window.innerWidth / 1920).toFixed(6)
      let yscale = (window.innerHeight / 1000).toFixed(6)
      this.appstyle = {
        transform: `scale(${xscale},${yscale})`
      }
    }
  }
}
</script>

<style lang="stylus">
body
  margin 0
  color white
  font-family "Microsoft Yahei"
  overflow hidden
#app
  height 1000px
  width 1920px
  position relative
  transform-origin 0 0
  >div
    position absolute
    left 0
    right 0
    top 0
    bottom 0
    background-image url('./components/Home/img/window-border.png'), url('./components/Home/img/bg.jpg')
    background-size 100% 100%
    >.title
      font-size 30px
      color #59b3ff
      position absolute
      top 32px
      left 730px
      text-align center
      letter-spacing 5px
      width 460px

.innerscr
  &::-webkit-scrollbar
    height 3px
    width 3px
  &::-webkit-scrollbar-track-piece
    background-color #003663
  &::-webkit-scrollbar-thumb
    background-color #59b3ff
    
.noscr
  &::-webkit-scrollbar
    display none

.pageslide-enter-active 
  transition: all .3s ease

.pageslide-leave-active
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0)

.pageslide-enter, .pageslide-leave-active
  transform translateX(400px)
  opacity 0

</style>